<template>
	<view class="follow-form-page">
		<!-- 标题 -->
		<view class="page-title">
			<text>填写跟进记录</text>
		</view>

		<!-- 表单主体 -->
		<view class="form-container">
			<!-- 备注 -->
			<view class="card">
				<text class="label">跟进内容</text>
				<textarea v-model="form.remark" placeholder="请输入跟进内容（最多200字）" maxlength="200" auto-height class="textarea" />
				<text class="word-count">{{ form.remark.length }}/200</text>
			</view>

			<!-- 跟进时间 -->
			<view class="card">
				<text class="label">下次跟进时间</text>
				<view class="radio-group">
					<view v-for="opt in timerOptions" :key="opt.value" class="radio-chip" :class="{ active: form.followTimer === opt.value }" @click="selectTimer(opt.value)">
						<uni-icons v-if="form.followTimer === opt.value" type="checkmarkempty" size="16" color="#fff" />
						{{ opt.label }}
					</view>
				</view>
				<view v-if="form.followTimer === '5'" class="custom-picker">
					<uni-datetime-picker v-model="form.customTimer" type="datetime" placeholder="选择具体时间" />
				</view>
			</view>

			<!-- 每日用量 -->
			<view class="card">
				<text class="label">每日用量</text>
				<view class="radio-group">
					<view v-for="d in dosageOptions" :key="d.value" class="radio-chip" :class="{ active: form.dosage === d.value }" @click="selectDosage(d.value)">
						<uni-icons v-if="form.dosage === d.value" type="checkmarkempty" size="16" color="#fff" />
						{{ d.label }}
					</view>
				</view>
				<view v-if="form.dosage === '9'" class="custom-input">
					<uni-number-box v-model="form.customDosage" :min="0" :max="10" :step="0.5" />
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="action-bar">
			<u-button class="bar-btn" type="primary" size="large" @click="submitForm" :loading="submitting">
				{{ submitting ? '提交中...' : '保存跟进' }}
			</u-button>
		</view>
	</view>
</template>

<script>
import { addFollowRecord } from '@/api/follow/index.js';
import { setToast } from '@/common/utils';

export default {
	data() {
		return {
			form: {
				remark: '',
				followTimer: '',
				customTimer: null,
				dosage: '',
				customDosage: null
			},
			timerOptions: [
				{ value: '1', label: '今天下午' },
				{ value: '2', label: '明天' },
				{ value: '3', label: '后天' },
				{ value: '4', label: '七天后' },
				{ value: '5', label: '自定义' }
			],
			dosageOptions: [
				{ value: '1', label: '1/3' },
				{ value: '2', label: '0.5' },
				{ value: '3', label: '2/3' },
				{ value: '4', label: '1' },
				{ value: '5', label: '1.5' },
				{ value: '6', label: '2' },
				{ value: '7', label: '2.5' },
				{ value: '8', label: '3' },
				{ value: '9', label: '自定义' }
			],
			pageParams: {},
			submitting: false
		};
	},
	onLoad(options) {
		const { params } = options;
		this.pageParams = JSON.parse(decodeURIComponent(params));
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		selectTimer(value) {
			this.form.followTimer = value;
			this.syncPresetTime();
		},
		selectDosage(value) {
			this.form.dosage = value;
		},
		// 原来的保持不变
		syncPresetTime() {
			if (this.form.followTimer === '5') return;
			const now = new Date();
			switch (this.form.followTimer) {
				case '1':
					now.setHours(15, 0, 0, 0);
					break;
				case '2':
					now.setDate(now.getDate() + 1);
					now.setHours(10, 0, 0, 0);
					break;
				case '3':
					now.setDate(now.getDate() + 2);
					now.setHours(10, 0, 0, 0);
					break;
				case '4':
					now.setDate(now.getDate() + 7);
					now.setHours(10, 0, 0, 0);
					break;
			}
			this.form.customTimer = now.toISOString();
		},
		normalizeDosage() {
			if (this.form.dosage === '9') return this.form.customDosage?.toFixed(2) || '';
			const map = {
				1: '0.33',
				2: '0.50',
				3: '0.67',
				4: '1.00',
				5: '1.50',
				6: '2.00',
				7: '2.50',
				8: '3.00'
			};
			return map[this.form.dosage] || '';
		},
		async submitForm() {
			if (!this.form.remark.trim()) return setToast('请输入备注');
			if (!this.form.followTimer) return setToast('请选择跟进时间');
			if (!this.form.dosage) return setToast('请选择每日用量');

			this.submitting = true;
			try {
				const res = await addFollowRecord({
					...this.pageParams,
					followRemark: this.form.remark,
					contactNextTime: this.form.customTimer,
					usageAmount: this.normalizeDosage()
				});

				if (res.code === 200) {
					setToast('提交成功');
					uni.$emit('followSubmitted');
					setTimeout(() => uni.navigateBack(), 800);
				} else {
					setToast(res.msg || '提交失败');
				}
			} catch (err) {
				setToast('网络错误');
			} finally {
				this.submitting = false;
			}
		}
	}
};
</script>

<style lang="scss">
$primary: #1890ff;
$bg: #f9fafc;
$text: #333;
$gray: #999;

.follow-form-page {
	min-height: 100vh;
	background: $bg;
	display: flex;
	flex-direction: column;
}

.page-title {
	font-size: 36rpx;
	font-weight: 600;
	color: $text;
	padding: 40rpx 30rpx 20rpx;
}

.form-container {
	flex: 1;
	padding: 0 30rpx 120rpx; // 预留底部按钮空间
}

.card {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);

	.label {
		font-size: 30rpx;
		color: $text;
		font-weight: 500;
		margin-bottom: 20rpx;
		display: block;
	}
}

.textarea {
	width: 100%;
	min-height: 200rpx;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 12rpx;
	padding: 20rpx;
	font-size: 28rpx;
	line-height: 1.6;
}

.word-count {
	display: block;
	text-align: right;
	font-size: 24rpx;
	color: $gray;
	margin-top: 10rpx;
}

.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.radio-chip {
	padding: 16rpx 28rpx;
	border-radius: 40rpx;
	font-size: 26rpx;
	background: #f5f7fa;
	color: $text;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	gap: 10rpx;

	&.active {
		background: linear-gradient(135deg, $primary, #40a9ff);
		color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
	}
}

.custom-picker,
.custom-input {
	margin-top: 20rpx;
}

.action-bar {
	position: fixed;
	bottom: 40rpx;
	left: 0;
	width: 100%;
	padding: 0 40rpx;
	display: flex;
	justify-content: center;

	.bar-btn {
		height: 80rpx;
		width: 90%;
	}
}
</style>
